<template>
  <div class="index-body" v-title="title" >
    <div class="indexWrap">
      <router-link to="/pick">
        <div class="weui-flex wrap padding-size">
          <div class="weui-flex__item">
            <img src="./1@2x.png" alt="" class="pick-img" />
            <div class="tipTitle">取件
              <div v-if="pickNumber>0" class="alter">{{pickNumber}}</div>
            </div>
          </div>
        </div>
      </router-link>

      <router-link to="/print">
        <div class="weui-flex wrap margin-top padding-size">
          <div class="weui-flex__item">
            <img src="./2@2x.png" alt="" class="pick-img" />
            <div class="tipTitle">打印</div>
          </div>
        </div>
      </router-link>

      <div class="weui-flex wrap margin-top padding-size-copy" @click="showDialog()" v-if="Mode ==='OpenApi' ||Mode ==='Free' " >
        <div class="weui-flex__item">
          <img src="./3@2x.png" alt="" class="pick-img" />
          <div class="tipTitle">复印/扫描</div>
        </div>
      </div>
      <!-- 解锁的弹框 -->
      <transition name="fade">
        <div class="js_dialog" id="iosDialog2" v-show="dialogShow">
          <div class="weui-mask"></div>
          <div class="weui-dialog">
            <div class="weui-dialog__bd">
              <div class="imgWrap">
                <img width="100" src="./lockSucess.png" alt="">
              </div>
              <p>解锁成功</p>
              <P>可以进行复印/扫描咯~</P>
            </div>
            <div class="weui-dialog__ft">
              <a href="javascript:;" class="weui-dialog__btn " @click="closeDialog">好的</a>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
  data() {
    return {
      pickNumber: 0,
      dialogShow: false,
      Mode: '',
      title:'印点点'
    }
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    // ajaxa方法
    getScan() {
      axios.post(`/user/Scan`)
        .then(res => {
          console.log(res)
          if (res.data.IsSuccess) {
            this.dialogShow = true;
          } else {
            weui.alert('解锁失败')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    showDialog() {
      this.getScan()
    },
    getPickUpNum() {
      axios('/user/NotPrintCount')
        .then(res => {
          console.log(res)
          this.pickNumber = res.data.Data
          sessionStorage.setItem('pickNumber',res.data.Data)
        })
        .catch(err => {
        })
    },
    getMode() {
      
      axios.get(`/printer/Mode`)
        .then(res => {
          if (res.data.IsSuccess) {
            console.log(res)
            //  alert(res.data.Data)
            this.Mode = res.data.Data
            sessionStorage.setItem('Mode',res.data.Data)
          } else {
            weuil.alert(res.data.Msg);
          }
        })
        .catch(err => {

        })
    }
  },
  created() {

    this.getPickUpNum()
    this.getMode()

  },
  beforeDestroy() {

  }
}
</script>

<style>
.index-body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.indexWrap {
  padding: 20px 10px 0;
  box-sizing: border-box;
}

.margin-top {
  margin-top: 20px;
}

.padding-size {
  padding: 0.6rem 2rem 0.6rem 0.6rem;
}

.padding-size-copy {
  padding: 0.6rem 1rem 0.6rem 0.6rem;
}

.wrap {
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 5px 10px #e1e2eb;
}

.wrap:active {
  background-color: rgba(122, 221, 254, .1);
}

.weui-flex__item {
  display: flex;
  justify-content: space-between;
}

.pick-img {
  width: 4rem;
  height: 3rem;
}

.tipTitle {
  font-family: '黑体 PingFangSC-Light Avenir', Helvetica, Arial, sans-serif;
  font-size: 26px;
  margin-top: 1rem;
  position: relative;
}

.alter {
  width: 20px;
  height: 20px;
  line-height: 2;
  border-radius: 10px;
  background-color: red;
  position: absolute;
  top: -2px;
  left: 52px;
  font-size: 12px;
  text-align: center;
  color:#fff;
  line-height: 20px;
  text-align: center;
}

a:visited,
a:hover {
  text-decoration: none;
}
</style>
